import Title from "@/components/Title";

const datas = [
    [
        "bg-[url('/parter/huawei.png')] phone:bg-[right_3rem_center] hidden phone:block",
        "bg-[url('/parter/liantong.png')]",
        "bg-[url('/parter/zijie.png')]",
        "bg-[url('/parter/zhendao.png')]",
    ],
    [
        "bg-[url('/parter/huajiao.png')] hidden phone:block",
        "bg-[url('/parter/yidong.png')]",
        "bg-[url('/parter/dianxin.png')]",
        "bg-[url('/parter/ali.png')]",
        "bg-[url('/parter/tengxun.png')] hidden phone:block",
    ],
    [
        "bg-[url('/parter/wujiang.png')]",
        "bg-[url('/parter/baiguoyuan.png')]",
        "bg-[url('/parter/qimeizhai.png')] bg-[size:40%]",
        "bg-[url('/parter/baichuan.png')] hidden phone:block",
    ],
];

const cls = [
    "phone:translate-x-[-4rem]",
    "phone:translate-x-3",
    "phone:translate-x-[12rem]",
];

const Parter = () => {
    return (
        <div className="pb-10 phone:pb-[10rem] overflow-hidden flex flex-col items-center bg-[url('/parter/bg.png')] bg-cover bg-top bg-no-repeat">
            <Title desc="联合行业先锋，共筑商业成功">合作伙伴</Title>
            <div className="max-w-[100rem] w-full phone:w-fit px-6 phone:px-0 phone:overflow-hidden relative phone:rounded-full phone:[mask-image:radial-gradient(circle,#000_50%,transparent_75%)]">
                {datas.map((data, index) => (
                    <div
                        key={index}
                        className={`w-full grid grid-cols-3 gap-3 phone:flex phone:gap-5 *:mb-3 phone:*:mb-10 flex-nowrap ${cls[index]}`}
                    >
                        {data.map((item, index) => (
                            <div
                                key={index}
                                className={`w-full h-12 phone:w-[12rem] phone:h-14 rounded-lg border border-gray-200 bg-[size:70%] phone:bg-contain bg-center bg-no-repeat ${item} bg-white`}
                            ></div>
                        ))}
                    </div>
                ))}
            </div>
        </div>
    );
};

export default Parter;
